<template>
  <div class="home-category">
    <ul class="list">
      <template v-for="(item, index) in home.category">
        <li
          v-if="index < 4"
          :key="index"
          class="list-item"
          @click="handleClick(item)"
        >
          {{ item.name }}
        </li>
      </template>
    </ul>
    <div class="more" @click="handleMore">全部</div>
  </div>
</template>

<script>
export default {
  name: 'HomeCategory',
  props: ['home'],
  data() {
    return {
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push(`/product/category/${item.id}`)
    },
    handleMore() {
      this.$router.push('/product/category')
    }
  }
}
</script>

<style scoped lang="stylus">
.home-category
  padding 0 10px 10px 10px
  //background #fcfcfc
  display flex
  justify-content space-between
  font-size $size
  //color #333
  color white
  .list
    flex 1
    //background rebeccapurple
    display flex
    justify-content space-around
    .list-item
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      // 4 * 75 + 10 + 10 = 320 + 55 = 375
      // 有些手机没有375
      width 70px
      box-sizing border-box
      font-weight 700
      letter-spacing 1.3px
  .more
    //background red
    width 55px
    text-align left
    text-indent 22px
    line-height 14px
    background-image url("../images/more.png")
    background-size 14px
    background-repeat no-repeat
    background-position 6px
    font-size 12px
</style>
